<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
	<style>
		*{
			font: 16px "微软雅黑";
			/* 去掉无序列表样式 针对一项列表标记 */
			list-style-type: none;
			/* 去掉无序列表样式 针对三项 ①列表项标记 list-style-type
					                   ②列表项位置 list-stylr-position
									   ③列表项图片 list-style-image
								所有的效果，去掉样式*/
			list-style: none;
			/* 去掉内外边距：ul li存在外边距 */
			margin: 0;
			padding: 0;
	    }
	    aside{
			width: 255px;
			height: 530px;
			background: #eaeeff;
			/* 盒子模型：外边距 */
			mar gin: 20px 200px;
	    }
	    aside ul.ul_sidebar li{
			width: 235px;
			height: 50px;
			text-align: left;
			line-height: 46px;
			/* 挂靠点【固定】使用相对定位 */
			position: relative;
			top: 15px;
	    }
	    aside ul.ul_sidebar li:hover{
			background-color: #ffaa00;
	    }
		/* 挂靠点【活动】使用绝对定位，按照父级位置固定 */
		aside ul.ul_sidebar div.out{
			width: 400px;
			height: 460px;
			border: 1px solid red;
			/* 绝对定位 */
			position: absolute;
			left: 435px;
			/* 默认隐藏 搞不定【jQuery】*/
			display: none;
		}
		/* 新增样式 */
		aside ul.ul_sidebar li span{
			/* 1 */
			posi tion: absolute;
			le ft: 200px;
			to p: 15px;
			/* 2 */
			float: right;
			padding-right: 20px;
		}
		/* 新增样式 左栏左侧文字间隙 左栏撑大 */
		aside ul.ul_sidebar li{
			padding-left: 20px;
		}
	</style>
	<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构:外层div  .sidebar
		html结构标记：aside元素语义化元素，表示：左栏，侧边栏，广告
		            有利于SEO优化
		            通常代替div+id/class
		              内层ul.li_sidebar li*10
					  内容参照京东左栏第一个
			 css结构:内部引入方式
		              通配选择器--合理添加
					  外层aside  235*460 背景色
					  内层div每个li加宽高235*46
					  内层文本垂直居中对齐,文字限定16px
					  鼠标移动上去li有背景色改变
		-->
	<aside>
		<ul class="ul_sidebar">
			<!-- 弹出框，模式：div+别名 -->
			<div class="out"></div>
			<li>手机 平板 电话卡<span>></span></li>
			<li>电视 盒子<span>></span></li>
			<li>路由器 智能硬件<span>></span></li>
			<li>移动电源 插线板<span>></span></li>
			<li>耳机 音箱<span>></span></li>
			<li>电池 存储卡<span>></span></li>
			<li>保护套 后盖<span>></span></li>
			<li>贴膜 其他配件<span>></span></li>
			<li>米兔 服装<span>></span></li>
			<li>箱包 其他周边<span>></span></li>
		</ul>
	</aside>
	<script>
		/*左栏实现：1.添加事件 li 2.添加效果  3.切换效果*/
		$("aside ul.ul_sidebar li").hover(function(){
			// 弹出框  默认隐藏--抓弹出框 第一件事  显示
			$("aside ul.ul_sidebar div.out").css("display","block");
		},function(){
			$("aside ul.ul_sidebar div.out").css("display","none");
		});
	</script>
	</body>
</html>
<!--  css 悬停效果   效果不能实现   不能切换
      jq  悬停效果事件源   hover    切换效果问题
	  语法：$("选择器").hover(function(){第一件事},funation(){第二件事})
-->